<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="名称" width="350"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="150"></el-table-column>
      <el-table-column prop="update_time" label="更新时间" width="150"></el-table-column>
      <el-table-column prop="status_text" label="状态" width="120"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="edit(scope.$index, scope.row)">查看/编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    data () {
      return {
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.setting.settingList,
        pageData: state => state.setting.pageData
      })
    },
    created () {
      this.settingList()
    },
    methods: {
      // 获取配置列表
      settingList () {
        let payload = {
          page: this.pageData.current_page,
          listRows: this.pageData.per_page
        }
        this.$store.dispatch('setting/settingList', payload)
      },
      // 点击翻页时操作
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.settingList()
      },
      edit (index, row) {
        this.$router.push({name: 'SettingEdit', params: {id: row.id}})
      }
    }
  }
</script>
